<!DOCTYPE html>  
<html lang="en">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>边缘网关智能车机</title>  
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">  
    <style>  
        body {  
            font-family: 'Roboto', sans-serif;  
            background: linear-gradient(to right, #141E30, #243B55);  
            color: #fff;  
            text-align: center;  
            padding: 60px;  
            margin: 0;  
        }  

        h1 {  
            color: #f39c12;  
            margin-bottom: 20px;  
            font-size: 3em;  
            font-weight: bold;  
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);  
        }  

        .container {  
            background-color: rgba(255, 255, 255, 0.1);  
            border-radius: 15px;  
            padding: 40px;  
            margin: auto;  
            max-width: 480px;  
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);  
            backdrop-filter: blur(10px);  
        }  

        input[type="text"] {  
            width: 100%;  
            padding: 14px;  
            margin: 10px 0;  
            border: 2px solid #f39c12;  
            border-radius: 8px;  
            transition: border-color 0.3s, box-shadow 0.3s;  
            font-size: 1.1em;  
            background: rgba(255, 255, 255, 0.2);  
            color: #fff;  
        }  

        input[type="text"]:focus {  
            border-color: #f1c40f;  
            outline: none;  
            box-shadow: 0 0 20px rgba(241, 196, 15, 0.5);  
        }  

        input[type="button"] {  
            background-color: #f39c12;  
            color: white;  
            border: none;  
            border-radius: 8px;  
            padding: 14px 22px;  
            cursor: pointer;  
            font-size: 1.1em;  
            transition: background-color 0.3s, transform 0.1s;  
            margin: 10px 0;  
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
        }  

        input[type="button"]:hover {  
            background-color: #e67e22;  
            transform: translateY(-1px);  
        }  

        .radio-group {  
            margin: 20px 0;  
            text-align: left;  
        }  

        label {  
            margin: 0 15px 0 0;  
            font-size: 1em;  
            color: #f39c12;  
        }  

        .radio-group input {  
            margin-right: 15px;  
            transform: scale(1.2);  
            cursor: pointer;  
        }  

        .footer {  
            margin-top: 30px;  
            font-size: 0.9em;  
            color: #bdc3c7;  
        }  

        .icon {  
            margin-right: 10px;  
        }  

        @media (max-width: 450px) {  
            .container {  
                padding: 20px;  
                max-width: 100%;  
            }  

            input[type="text"], input[type="button"] {  
                font-size: 0.9em;  
            }  

            h1 {  
                font-size: 2.2em;  
            }  
        }  
    </style>  
    <script>  
        function sex(obj) {  
            var xhr = new XMLHttpRequest();  
            var url = ""; // Write your URL here  
            xhr.open("post", url, true); // Request method and URL set asynchronously  
            
            if (obj == 'set1') {  
                xhr.send("set1=0set2=0");  
            } else if (obj == 'set2') {  
                xhr.send("set1=0set2=1");  
            } else if (obj == 'set3') {  
                xhr.send("set1=1set2=0");  
            } else if (obj == 'set4') {  
                xhr.send("set1=1set2=1");  
            }  
        }  

        function flush() {  
            var xhr = new XMLHttpRequest();  
            var url = ""; // Write your URL here  
            xhr.open("post", url, true); // Request method and URL set asynchronously  
            xhr.send("get");  

            xhr.onreadystatechange = function () {  
                if (xhr.readyState === 4 && xhr.status === 200) { // Request completed successfully  
                    var z = xhr.responseText.split(' ');  
                    document.getElementById("usrname").value = z[0];  
                    document.getElementById("usrname2").value = z[1];  
                }  
            }  
        }  
    </script>  
</head>  

<body>  
    <div class="container">  
        <h1>边缘网关智能车机系统</h1>  

        <div>  
            <i class="fas fa-temperature-high icon"></i>  
            <span>电池温度：</span>  
            <input type="text" name="usrname" id="usrname" value="0" readonly>  
        </div>  

        <div>  
            <i class="fas fa-temperature-high icon"></i>  
            <span>车内温度：</span>  
            <input type="text" name="usrname" id="usrname2" value="0" readonly>  
        </div>  
        
        <div>  
            <i class="fas fa-tint icon"></i>  
            <span>车内湿度：</span>  
            <input type="text" name="usrname" id="usrname3" value="0" readonly>  
        </div>  

        <div>  
            <i class="fas fa-bolt icon"></i> 
            <span>电池电压：</span>  
            <input type="text" name="usrname" id="usrname4" value="0" readonly>  
        </div>
        
        <input type="button" name="flush" value="刷新" onclick="flush()"><br>  

        <div class="radio-group"> 
            <h3>  
                <i class="fas fa-lightbulb icon"></i>  
                开启后备箱:  
            </h3>  
            <input type="radio" name="sex" id="set1" onclick="sex(this.id)">  
            <label for="set1">关闭</label>  
            <input type="radio" name="sex" id="set2" onclick="sex(this.id)">  
            <label for="set2">开启</label>  
        </div>  

        <div class="radio-group">  
            <h3>  
                <i class="fas fa-bell icon"></i>  
                一键寻车:  
            </h3>  
            <input type="radio" name="sex" id="set3" onclick="sex(this.id)">  
            <label for="set3">关闭</label>  
            <input type="radio" name="sex" id="set4" onclick="sex(this.id)">  
            <label for="set4">开启</label>  
        </div>  

        <div class="footer">© 2024 边缘网关智能车机系统系统</div>  
    </div>  
</body>  

</html>